Responsive Design

Your website is how you are represented to the world online; it’s a brochure for any potential customer, client or contact. Anywhere and at any time they can view and decide whether your company, product or image is the right one for them. Therefore it is essential that your web site practices good web design techniques which will enable your site to get the maximum amount of traffic and make the maximum impact.

At the same time the way websites are viewed is constantly changing:

The Web has gone Mobile. More users are accessing the web from more places on more devices than ever before with widely varying screen resolutions and sizes. The challenge is to represent the website content to its best advantage wherever it is rendered.

Accept Browser Choice: The days of a single browser dominating the market have gone for good; many website users regularly use different browsers for desktop, tablet and mobile devices and can change or update their browsers easily and quickly – from a design point of view this is a moving target.  

Can it be Done? How is it possible to have a single website that can be viewed on a 27” high resolution desktop monitor and a 9” tablet? Responsive Web design offers a solution by implementing an approach that states that design and development should respond to the user’s behaviour and environment. The response is based on screen size, platform and orientation and uses fluid grid layouts, flexible images and CSS media queries.

As the user switches from their desktop to tablet or phone, the website responds to accommodate for resolution, image size and scripting abilities; the website should have the technology to respond to the user environment, enhancing the viewing experience. As a bonus this greatly reduces the need for a different design and development phase for each screen size or resolution.

Key Points

Content can be created once and delivered to multiple devices maintaining continuity and reducing cost

The user experience is the same no matter which device accesses the site's content – within the limitations of the device obviously

As consumers increasingly use mobile devices to shop, responsive design can ensure this activity is familiar on a desktop, phone or tablet With over half of the UK's population now owning a smartphone or tablet, content must be optimised to reach out to the largest audience

Screen Sizes, Devices and Viewers

The Internet is Everywhere - In your pocket and on your wall.
Some time ago, web site designers knew the exact dimensions of work they were commissioned to do and clients knew how this work would be viewed. However, with the emergence of smart phones, tablets, gaming consoles on HD TV's and monitors with vastly different sizes, aspect ratios and resolutions, this certainty is gone.

What is the Best Fit? It’s not surprising that responsive web design (RWD) has evolved as an attempt to solve usability problems that have come about due to the various devices used to browse the Internet. While RWD is powerful it is not magic and design considerations still have to be made regarding the target viewing platform. This largely comes down to undestanding your product, the target audience and their likely viewing habits:

When visualising your website it is important to decide how you want the site to look on your preferred device; ask yourself what is the most important dimension for you, the height or the width of the available area in the browser?

The height might be more important if you want your site to fit the screen without the need to scroll down (no vertical scrollbar), if you want a particular image to be wholly visible or if you want a particular section of text to be readable without using the scrollbar

The width might be more important if your site contains long text paragraphs or lots of information on the page making scrolling necessary but you want to fit an image or your site navigation cleanly within the available width.

Further Reading... 

Wikipedia: Responsive Web Design

Techradar: Why responsive website design matters